<template>
     <!--手机号输入框-->
<div class="login_box">
    <input type="number" placeholder="请输入手机号" class="phoneInput" v-model="mobile"/>
    <span v-if="codeShow" style="color:red;" @click="getPhoneCode">获取验证码</span>
<!-- 倒计时 -->
    <span v-if="!codeShow" class="count">{{count}}秒后重试</span>
</div>
</template>

<script>
export default {
data() {
   return {
      codeShow: true,
      count: '',
      timer: null,
      mobile: "",  //手机号
   };
},
   methods:{
    getPhoneCode() {  //获取短信验证码
   var Reg = /^[1][34578][0-9]{9}$/;
   // 正则验证
   if (Reg.test(this.mobile)) {
      this.$toast('验证码发送成功');
      const TIME_COUNT = 60;
      if (!this.timer) {
         this.count = TIME_COUNT;
         this.codeShow = false;
         this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
               this.count--;
            } else {
               this.codeShow = true;
               clearInterval(this.timer);
               this.timer = null;
            }
         }, 1000)
      }
      let code = {
         mobile: this.mobile,
         sms_type: "login"
      }
      getSmsCode(code).then(res => {
         console.log(res)
      })
   } else {
      this.$toast('手机号码格式不正确');
   }
}


   }
}
</script>

<style>

</style>